<template>
  <section class="component add-tag">
    <el-form :model="model" :rules="rules" label-width="100px" ref="model">
      <el-row>
        <el-col :span="8">
          <el-form-item label="代码编号" prop="code">
            <el-input
              v-model.trim="model.code"
              :disabled="isEdit || isDetail"
              :maxlength="10"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代码描述" prop="description">
            <el-input
              v-model.trim="model.description"
              :disabled="isEdit || isDetail"
              :maxlength="20"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="状态" prop="tagStatus">
            <el-select
              clearable
              placeholder="请选择"
              v-model="model.tagStatus"
              :disabled="isDetail"
            >
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData(
                  'CommonState'
                )"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isDetail || isApply">
          <el-form-item label="是否可维护" prop="isMaintain">
            <el-select
              clearable
              placeholder="请选择"
              v-model="model.isMaintain"
              :disabled="isDetail"
            >
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData('CommonFlag')"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签性质" prop="property">
            <el-select
              clearable
              placeholder="请选择"
              v-model="model.property"
              :disabled="isDetail"
            >
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData('CommonFlag')"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属层级" prop="tagLevel">
            <el-select
              clearable
              placeholder="请选择"
              v-model="model.tagLevel"
              :disabled="isDetail || isEdit"
            >
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData('TagLevel')"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优先级" prop="priority">
            <el-input
              v-model.trim="model.priority"
              :disabled="isDetail"
              :maxlength="4"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属组别" prop="systemGroup">
            <el-select
              clearable
              placeholder="请选择"
              v-model="model.systemGroup"
              :disabled="isDetail"
            >
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData(
                  'SystemGroup'
                )"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="过期日" prop="expireType">
            <el-select
              clearable
              placeholder="请选择"
              v-model="model.expireType"
              @change="expireTypeChange"
              :disabled="isDetail"
            >
              <el-option
                :key="index"
                :label="name"
                :value="code"
                v-for="{ index, name, code } in $dict.getDictData('ExpireType')"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="expirationDate"
            label=""
            v-if="model.expireType === 'DATE'"
          >
            <el-date-picker
              v-model="model.expirationDate"
              type="date"
              placeholder="选择日期"
              :disabled="isDetail"
              :picker-options="$common.datePickDisabledDate(1)"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            prop="expirationMonth"
            label=""
            v-if="model.expireType === 'MONTH'"
          >
            <el-input
              v-model="model.expirationMonth"
              class="expiration-month"
              :disabled="isDetail"
              style="width: 100px;"
            ></el-input
            >个月
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="标签注记" prop="note">
        <el-input
          v-model.trim="model.note"
          type="textarea"
          :disabled="isDetail"
          :maxlength="300"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="申请人代号" prop="agentCode" v-if="isApply">
        {{ row.agentCode }}
      </el-form-item>
      <el-form-item label="审批历史" v-if="isApply">
        <data-box :data="dataSet" class="box-no-padding">
          <template slot="columns">
            <el-table-column
              prop="approvalName"
              label="审批人"
              :min-width="$helper.getColumnWidth(3)"
            >
            </el-table-column>
            <el-table-column
              prop="approvalTime"
              label="审批时间"
              :formatter="row => $filter.dateTimeFormat(row.approvalTime)"
              :min-width="$helper.getColumnWidth(5)"
            >
            </el-table-column>
            <el-table-column
              prop="applyStatus"
              label="审批结果"
              :formatter="
                row => $filter.dictConvert(row.applyStatus, 'ApplyStatus')
              "
              :min-width="$helper.getColumnWidth(3)"
            >
            </el-table-column>
            <el-table-column
              prop="approvalOpinion"
              label="审批意见"
              :min-width="$helper.getColumnWidth(3)"
            >
            </el-table-column>
          </template>
        </data-box>
      </el-form-item>

      <el-form-item label="历史注记" v-if="(isDetail && !isApply) || isEdit">
        <data-box
          :data="dataDetailSet"
          :page="pageService"
          @onPageChange="getDetailData"
          :height="200"
          class="box-no-padding"
        >
          <template slot="columns">
            <el-table-column
              prop="maintainDate"
              label="注记时间"
              :formatter="row => $filter.dateTimeFormat(row.maintainDate)"
              :min-width="$helper.getColumnWidth(3)"
            >
            </el-table-column>
            <el-table-column
              prop="agentName"
              label="添加人"
              :min-width="$helper.getColumnWidth(3)"
            >
            </el-table-column>
            <el-table-column
              prop="note"
              label="内容"
              show-overflow-tooltip
              :min-width="$helper.getColumnWidth(3)"
            >
            </el-table-column>
          </template>
        </data-box>
      </el-form-item>
    </el-form>

    <div class="confirm-button">
      <el-button @click="emitClose">{{
        !isDetail ? "取消" : "关闭"
      }}</el-button>
      <el-button @click="onClickCommit" v-if="!isDetail">{{
        isEdit ? "提交审批" : "保存"
      }}</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from "vue-property-decorator";
import { Dependencies } from "~/core/decorator";
import { CustomerGroupManageService } from "~/services/domain-service/customer-group-manage.service";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { CaseApplyRecordService } from "~/services//domain-service/case-apply-record.service";

@Component({
  components: {}
})
export default class AddTag extends Vue {
  @Dependencies(CustomerGroupManageService)
  private customerGroupManageService: CustomerGroupManageService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService;
  @Prop() private isEdit;
  @Prop() private row;
  @Prop() private isDetail;
  @Prop({ default: false }) private isApply;
  private model: any = {
    code: "",
    description: "",
    isMaintain: "YES",
    property: "",
    tagLevel: "",
    priority: "",
    expireType: "",
    expirationDate: "",
    expirationMonth: "",
    note: "",
    systemGroup: "",
    tagStatus: ""
  };
  private dataSet: any = [];
  private dataDetailSet: any = [];
  private rules: any = {
    code: [
      { required: true, message: "请填写代码编号" },
      {pattern:this.$validator.regex.numAndEn,message:'只能是数字和字母!'}
    ],
    description: { required: true, message: "请填写代码描述" },
    isMaintain: { required: true, message: "请选择状态", trigger: "change" },
    property: { required: true, message: "请选择标签性质", trigger: "change" },
    tagLevel: { required: true, message: "请选择所属层级", trigger: "change" },
    priority: [
      { required: true, message: "请输入优先级", trigger: "blur" },
      {
        pattern: this.$validator.regex.isNumber,
        message: "请输入数字",
        trigger: "blur"
      }
    ],
    expireType: { required: true, message: "请选择过期日", trigger: "change" },
    expirationDate: {
      required: true,
      message: "请选择日期",
      trigger: "change"
    },
    expirationMonth: [
      { required: true, message: "请输入", trigger: "change" },
      { pattern: this.$validator.regex.isNumber, message: "请输入正整数" }
    ],
    note: { required: true, message: "请输入标签注记" },
    systemGroup: {
      required: true,
      message: "请选择所属组别",
      trigger: "change"
    },
    tagStatus: { required: true, message: "请选择状态" }
  };

  @Emit("close") private emitClose() {}
  @Emit("refreshData") private emitRefreshData() {}

  private dataHandler() {
    const form: any = this.$refs.model;
    form.resetFields();
    if (this.isEdit || this.isDetail) {
      this.model = { ...this.row };
    }
  }

  private getApplyData() {
    this.dataSet = [];
    this.customerGroupManageService
      .getTagCaseApplyRecordHistory({
        id: this.row.id
        // applyCategory: "TAG_CREATE"
      })
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private applyDetailHistory() {
    this.dataHandler();
    this.getApplyData();
  }

  private getDetailData() {
    this.dataDetailSet = [];
    this.customerGroupManageService
      .getTagApplyByTagId({ id: this.row.id }, this.pageService)
      .subscribe(data => {
        this.dataDetailSet = data;
      });
  }

  /**
   * 提交
   */
  private onClickCommit() {
    const form: any = this.$refs.model;
    form.validate(valid => {
      if (!valid) return;
      const params = { ...this.model, isMaintain: "YES" };
      if (this.model.expirationDate) {
        params.expirationDate = this.$filter.dateFormat(
          this.model.expirationDate
        );
      }
      if (!this.isEdit) this.addHandler(params);
      else this.editHandler(params);
    });
  }

  private addHandler(params) {
    this.customerGroupManageService.addTag(params).subscribe(data => {
      this.successhandler();
    });
  }

  private editHandler(params) {
    this.customerGroupManageService.modifyTag(params).subscribe(data => {
      this.successhandler();
    });
  }

  private tagDetailHandler() {}

  private successhandler() {
    this.$message.success("操作成功！");
    this.emitClose();
    this.emitRefreshData();
  }

  private expireTypeChange(value) {
    if (value === "MONTH") {
      this.model.expirationDate = "";
    } else if (value === "DATE") {
      this.model.expirationMonth = "";
    } else {
      this.model.expirationDate = "";
      this.model.expirationMonth = "";
    }
  }
}
</script>
<style lang="less" scoped>
.component.add-tag {
  .expiration-month {
    width: 100px;
    margin-right: 10px;
  }
  .box-no-padding {
    padding: 0;
  }
}
</style>
